<template>
  <div
    class="remarks-box"
    :class="{
      'remarks-box-hd': !visible && flag,
      'remarks-box-hd1': !visible && !flag,
      'remarks-box-auto': visible,
    }"
  >
    <div
      class="remarks-box-shadow"
      v-if="ifShadow"
      :style="{
        background: !visible
          ? `linear-gradient(180deg, rgba(250, 249, 247, 0) 0%,${props.color} 71%) top / 100% 100% no-repeat`
          : '',
      }"
    >
      <span @click="changeVisible" :style="{ color: store.styleInfo.themeColor }">{{
        !visible ? '展开阅读全文' : '收起'
      }}</span>
      <!-- <img
        :style="{ transform: visible ? 'rotate(180deg)' : '' }"
        src="//static.jiyi.show/template/template1/wap/readMore.png"
        alt=""
      /> -->
      <div
        class="expand-icon"
        :style="{ transform: visible ? 'rotate(180deg)' : '', color: store.styleInfo.themeColor }"
      >
        <i class="doorIcon">&#xe637;</i>
      </div>
    </div>
    <div
      v-if="props.remarks"
      class="remarks-text"
      alt=""
      :id="'img-class' + props.id"
      v-html="getTextHtml(props.remarks)"
    />
    <!-- t-image--fit-remarks t-image--position-center -->
  </div>
  <!-- <t-image-viewer v-model:visible="visible" :images="[urls + props.remarks]"> </t-image-viewer> -->
</template>

<script setup lang="ts">
// @ts-nocheck
import { urls } from '@/utils/request/upload';
import { getTextHtml } from '@/utils/minxin';
import { ref, onMounted, nextTick, watch } from 'vue';
import { useProjectStore } from '@/store';
const store = useProjectStore();
const visible = ref(false);
const ifShadow = ref(false); //遮罩层是否展示
const props = defineProps({
  id: {
    type: Number,
  },
  remarks: {
    type: String,
  },
  color: {
    type: String,
    default: '#faf9f7',
  },
  //行数是否超过6行
  flag: {
    type: Boolean,
    default: true,
  },
});
const init = () => {
  try {
    let dom = document.getElementById('img-class' + props.id);
    if (dom) {
      let targetHeight = dom.clientHeight;
      console.log(dom, 'dom.clientHeight----');
      let height = props.flag ? 301 : 238;
      console.log(height, 'height');

      if (targetHeight > height) {
        ifShadow.value = true;
      } else {
        ifShadow.value = false;
      }
    }
  } catch (err) {
    console.log(err);
  }
};

onMounted(() => {
  init();
});
const changeVisible = () => {
  visible.value = !visible.value;
  if (!visible.value) {
    nextTick(() => {
      // let dom = document.getElementById('img-class' + props.id);
      // dom.scrollIntoView();
    });
  }
};
watch(
  () => props.remarks,
  () => {
    nextTick(() => {
      visible.value = false;
      init();
    });
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.remarks-box {
  // display: flex;
  position: relative;
  width: 100%;
  //   height: auto;

  // margin-bottom: 26px;
  img {
    display: flex;
    width: 100%;
    // height: auto;
  }
}
.remarks-box-hd {
  max-height: 275px;
  overflow: hidden;
  // .remarks-text {
  //   padding-bottom: 26px;
  // }
}
.remarks-box-hd1 {
  max-height: 214px;
  overflow: hidden;
}

.remarks-box-auto {
  height: auto;
  .remarks-text {
    padding-bottom: 26px;
  }
}
.remarks-box-shadow {
  opacity: 1;
  display: flex;
  // flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  // background: linear-gradient(180deg, rgba(250, 249, 247, 0) 0%, #faf9f7 100%) top / 100% 100% no-repeat;
  z-index: 1;
  // border-radius: 10px;
  // box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

  span {
    font-size: 15px;
    display: inline-block;
    line-height: 22px;
    vertical-align: middle;
  }
  > img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
}
.remarks-text {
  overflow: hidden;
  color: #333;
  text-align: justify;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
  // padding-bottom: 26px;
  text-indent: 2em;
}
.expand-icon {
  // margin-bottom: 1px;
  font-size: 16px;
  line-height: 22px;
  margin-left: 4px;
}
</style>
